<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
<script type="text/javascript">
    const app = {
      data() {
        return {
          seen: 1<2
        }
      }
    }
     
    Vue.createApp(app).mount('#app')
</script>
<br>
<br>
<div id="app2">
    <template v-if="seen">
        <h1>网站</h1>
        <p>Google</p>
        <p>Runoob</p>
        <p>Taobao</p>
    </template>
</div>
<script>
const app2 = {
  data() {
    return {
      seen: true
    }
  }
}

Vue.createApp(app2).mount('#app2')
</script>
<br>
<br>
<div id="app3">
    <div v-if="Math.random() > 0.4">
      随机数大于 0.4
    </div>
    <div v-else>
      随机数小于等于 0.4
    </div>
</div>
<script type="text/javascript">
    Vue.createApp(app3).mount('#app3')
</script>
<br>
<br>
<div id="app4">
    <div v-if="type === 'A'">
         A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
<script>
const app4 = {
  data() {
    return {
      type: "C" 
    }
  }
}
Vue.createApp(app4).mount('#app4')
</script>
<br>
<br>
<div id="app5">
    <h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
    const app5 = {
      data() {
        return {
          ok: false 
        }
      }
    }
    Vue.createApp(app5).mount('#app5')
</script>
</body>
</html>